<template>
  <div class="mian">
    <div class="login-contain">
      <div class="login-left">
        <img src="" alt="" />
        <div class="text1">{{ store.title }}</div>
        <div class="text2">爱自己爱健康</div>
      </div>
      <div class="login-right">
        <div class="login-title">用户登录</div>

        <el-form
          style="width: 100%"
          label-width="0"
          class="login-ruleForm"
          size="default"
          status-icon
        >
        </el-form>
        <el-form-item prop="userName">
          <el-input v-model="data.ruleForm.userName" placeholder="输入账号" clearable />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="data.ruleForm.password"
            placeholder="输入密码"
            clearable
            show-password
          />
        </el-form-item>
        <!-- <el-form-item prop="code" class="login-code">
          <el-input v-model="data.ruleForm.code" placeholder="输入验证码" clearable />
          <img src="" alt="" class="login-code-img" />
        </el-form-item> -->
        <div class="agreement">
          <el-checkbox v-model="data.checked" size="large" />
          <div @click="data.checked = !data.checked">阅读并同意</div>
          <div class="text1" @click="data.checked = !data.checked">《服务协议》</div>
          <div class="text1" @click="data.checked = !data.checked">《隐私政策》</div>
        </div>
        <div class="loginBtn1" @click="login(ruleFormRef)">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup name="login">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '../stores'
const router = useRouter()
const store = useStore()
// 初始化数据
let data = reactive({
  // form
  ruleForm: {
    userName: '',
    password: ''
    // code: ''
  },
  checked: false //协议
})

const login = async (ref) => {
  if (!data.ruleForm.userName) {
    return window.showMessage({
      message: '请输入账号'
    })
  }
  if (!data.ruleForm.password) {
    return window.showMessage({
      message: '请输入密码'
    })
  }
  // if (!data.ruleForm.code) {
  //   return window.showMessage({
  //     message: '请输入验证码'
  //   })
  // }
  if (!data.checked) {
    return window.showMessage({
      message: '请阅读并同意《服务协议》《隐私政策》'
    })
  }

  if (data.ruleForm.userName != 'admin') {
    return window.showMessage({
      message: '账号错误'
    })
  }
  if (data.ruleForm.password != '12345678') {
    return window.showMessage({
      message: '密码错误'
    })
  }

  window.showMessage({
    message: '登录成功',
    type: 'success'
  })

  localStorage.setItem('token', 'ecajlkgalksnglkhsalkdgjlksadfhsdnfklsn')
  router.replace('/home')
  // window.api.sendMsg('close-window')
  // window.api.sendMsg('minimize-window')

  // let url = 'https://powerfun.oss-cn-shanghai.aliyuncs.com/etf-admin/20240723153237904Banner2.png'
  // let downDom = document.createElement('a')
  // downDom.href = url
  // document.body.append(downDom)
  // downDom.click()
  // document.body.removeChild(downDom)
  // window.open(url)
}
</script>

<style lang="less" scoped>
.mian {
  width: 100%;
  height: 100%;
  -webkit-app-region: drag;
}
.login-contain {
  width: 700px;
  height: 456px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  display: flex;
  align-items: stretch;
}
.login-left {
  width: 300px;
  height: 100%;
  flex-shrink: 0;
  padding-top: 80px;
  display: flex;
  align-items: center;
  flex-direction: column;
  img {
    width: 93px;
    height: 93px;
  }
  .text1 {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    line-height: 25px;
    font-weight: 700;
    font-size: 30px;
    color: #31bab5;
    margin: 20px 0 15px;
  }
  .text2 {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 15px;
    color: #31bab5;
    letter-spacing: 0;
    line-height: 15px;
    font-weight: 700;
  }
}
.login-right {
  flex: 1;
  flex-shrink: 0;
  height: 100%;
  padding: 70px 60px;
  .login-title {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 25px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    line-height: 25px;
    font-weight: 700;
    margin-bottom: 36px;
  }
}
.agreement {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 29px;
  .el-checkbox {
    margin-right: 5px;
  }
  .text1 {
    color: #31bab5;
  }
}
.login-code-img {
  width: 100px;
  height: 32px;
  border-radius: 2px;
}
</style>
